<template>
  <div class="grid-content">
    <el-tabs v-model="activeName" class="leftTabs">
      <el-tab-pane label="报项" name="first">
        <div class="pad20">
          <el-form :model="query" :inline="true">
            <el-form-item label="赛事名称">
              <el-input v-model="query.name" @change="getList"/>
            </el-form-item>
            <el-form-item label="赛事时间">
              <el-date-picker
                  v-model="cptPeriodArr"
                  format="YYYY-MM-DD" type="daterange"
                  value-format="YYYY-MM-DD" range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  @change="getList"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="danger" @click="getList">查询</el-button>
              <el-button type="info" @click="reset(query)">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="80" align="center"/>
            <el-table-column label="赛事名称" min-width="260">
              <template #default="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column label="参赛队" min-width="260">
              <template #default="scope">
                <span v-if="scope.row.groupName">{{ scope.row.groupName }}</span>
                <span v-else>-</span>
              </template>
            </el-table-column>

            <el-table-column label="赛事开始时间" min-width="120">
              <template #default="scope">{{ scope.row.beginTime.substring(0, 10) }}</template>
            </el-table-column>
            <el-table-column label="赛事结束时间" min-width="120">
              <template #default="scope">{{ scope.row.endTime.substring(0, 10) }}</template>
            </el-table-column>
            <el-table-column label="审批状态" min-width="100" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.auditStatus=='1'" type="info">已提交</el-tag>
                <el-tag v-if="scope.row.auditStatus=='2'" type="success">审核通过</el-tag>
                <el-tag v-if="scope.row.auditStatus=='3'" type="danger">未通过</el-tag>
                <el-tag v-if="scope.row.auditStatus=='4'" type="warning">已取消</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" class-name="small-padding" width="180">
              <template #default="scope">
                <el-button type="text" v-if="scope.row.auditStatus!='0'" @click="downloadVoucher(scope.row)">
                  下载报名凭证
                </el-button>
                <el-button type="text" @click="signRow(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
              v-show="total > 0"
              v-model:page="query.pageNum"
              v-model:limit="query.pageSize"
              :total="total"
              @pagination="getList"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="订单" name="two">
        <div class="pad20">
          <el-form :model="query2" :inline="true">
            <el-form-item label="订单状态">
              <el-select v-model="query2.payStatus" @change="getBillList">
                <el-option value="" label="全部"/>
                <el-option value="0" label="待支付"/>
                <el-option value="3" label="已完成"/>
                <!--                <el-option value="0" label="已取消"/> 审批拒绝的-->
                <el-option value="5" label="已退回"/>
              </el-select>
            </el-form-item>
            <el-form-item label="支付方式">
              <el-select v-model="query2.payTypeParam" @change="getBillList">
                <el-option value="" label="全部">全部</el-option>
                <el-option value="0" label="线上支付">线上支付</el-option>
                <el-option value="1" label="线下支付">线下支付</el-option>
                <el-option value="2" label="会员卡支付">会员卡支付</el-option>
                <el-option value="3" label="微信支付">微信支付</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="订单号">
              <el-input v-model="query2.code"/>
            </el-form-item>
            <el-form-item label="订单名称">
              <el-input v-model="query2.cptName" @change="getBillList"/>
            </el-form-item>
            <el-form-item label="付款时间">
              <el-date-picker
                  v-model="payTimeArr"
                  format="YYYY-MM-DD" type="daterange"
                  value-format="YYYY-MM-DD" range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  @change="getBillList"
              />
            </el-form-item>
            <el-form-item label="下单时间">
              <el-date-picker
                  v-model="commitTimeArr"
                  format="YYYY-MM-DD" type="daterange"
                  value-format="YYYY-MM-DD" range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  @change="getBillList"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="danger" @click="getBillList">查询</el-button>
              <el-button type="info" @click="reset(query2)">重置</el-button>
            </el-form-item>

          </el-form>

          <el-table v-if="billList.length>0" :data="billList" style="width: 100%">
            <!--            <el-table-column type="selection" width="80" />-->
            <el-table-column prop="id" label="订单编号" min-width="200"/>
            <el-table-column prop="cptName" label="订单名称" min-width="200"/>
            <el-table-column prop="commitTime" label="下单时间" min-width="180"/>
            <el-table-column prop="payTime" label="付款时间" min-width="180"/>
            <el-table-column label="支付金额" min-width="120" align="center">
              <template #default="scope">
                <span v-if="scope.row.needPay=='0'" class="green">免费订单</span>
                <span v-else>¥{{ scope.row.totalAmount }}</span>
              </template>
            </el-table-column>
            <!--            <el-table-column label="已付金额" min-width="120" align="center">-->
            <!--              <template #default="scope">-->
            <!--                <span v-if="scope.row.needPay=='0'" class="green">免费订单</span>-->
            <!--                <span v-else-if="scope.row.totalPayAmount" class="orange">¥{{ scope.row.totalPayAmount }}</span>-->
            <!--                <span v-else>&#45;&#45;</span>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column label="付款方式" min-width="120" align="center">
              <template #default="scope">
                <span v-if="scope.row.payType=='0'">会员卡支付</span>
                <span v-else-if="scope.row.payType=='1'">微信支付</span>
                <span v-else-if="scope.row.payType=='2'">线下支付</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="支付状态" min-width="120" align="center">
              <template #default="scope">
                <span v-if="scope.row.needPay=='0'" class="green">免费订单</span>
                <div v-else>
                  <span v-if="scope.row.payStatus=='0'">待支付</span>
                  <span v-if="scope.row.payStatus=='1'">待核销</span>
                  <span v-if="scope.row.payStatus=='2'">付款中</span>
                  <span v-if="scope.row.payStatus=='3'" class="green">已完成</span>
                  <span v-if="scope.row.payStatus=='4'">退款中</span>
                  <span v-if="scope.row.payStatus=='5'" class="text-danger">已退回</span>
                  <span v-if="scope.row.payStatus=='6'">退款核销中</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="审核状态" min-width="120" align="center">
              <template #default="scope">
                <!-- 待核销，待审核，审核拒绝，审核通过，已取消-->
                <span v-if="scope.row.auditStatus=='1'" class="text-warning">待审核</span>
                <span v-if="scope.row.auditStatus=='2'" class="green">审核通过</span>
                <span v-if="scope.row.auditStatus=='3'" class="text-danger">审核未通过</span>
                <span v-if="scope.row.auditStatus=='4'">已取消</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" class-name="small-padding" width="150">
              <template #default="scope">
                <el-button type="text" @click="billDetail(scope.row)">详情</el-button>
                <el-button
                    v-if="scope.row.payType!='2'&&scope.row.payStatus=='0'&&scope.row.auditStatus=='0'" type="text"
                    @click="goPay(scope.row)"
                >支付
                </el-button>
                <el-button
                    v-if="scope.row.payStatus=='0'&&scope.row.auditStatus=='0'&&scope.row.payType!='2'" type="text"
                    @click="cancelBill(scope.row)"
                >取消
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-empty v-if="billList.length==0" description="暂无数据"/>
          <pagination
              v-show="total > 0"
              v-model:page="query2.pageNum"
              v-model:limit="query2.pageSize"
              :total="total2"
              @pagination="getBillList"
          />
        </div>
      </el-tab-pane>

    </el-tabs>

    <!--    报项详情-->
    <dialogModifySign :props="dialogModifySignProps"/>
    <!--    订单详情-->
    <dialogModifyBill :props="dialogModifyBillProps"/>

    <el-dialog v-model="payPop" title="请选择支付方式" width="720px">

      <div class="centerPrice">
        ¥<span>{{ nowBill?.totalAmount }}</span>
      </div>
      <div style="margin: 40px">
        <el-radio-group v-model="payType">
          <el-radio v-if="myBalance>'0'" label="0" size="large" border><img
              src="@/assets/img/zf02.png"
              style="width: 30px;"
          >
            会员卡支付<span>(余额 <i class="orange">¥{{ myBalance }}</i>)</span>
          </el-radio>
          <el-radio label="1" size="large" border><img src="@/assets/img/zf_wx.png">微信</el-radio>
          <el-radio label="2" size="large" border><img src="@/assets/img/zf_xj.png">线下支付</el-radio>
        </el-radio-group>
      </div>
      <div class="panel-footer text-center">
        <el-button type="success" round @click="payBill">立即支付</el-button>
      </div>
    </el-dialog>
    <el-dialog v-model="showOrganizerInfo" title=" 线下支付" width="400px">
      <ul class="orgbox">
        <li>单位：{{ org.organizerName }}</li>
        <li>开户行：{{ org.organizerBank }}</li>
        <li>账户：{{ org.organizerAccount }}</li>
        <li>打款金额：<span class="orange">¥{{ org.organizerFee }}</span></li>
      </ul>
      <div class="text-center">
        <el-button type="success" round @click="payMationDone">我已复制</el-button>
      </div>
    </el-dialog>
    <el-dialog v-model="showResult">
      <el-result
          icon="success"
          title="支付成功"
      />
    </el-dialog>
    <we-pay ref="wePayRef" @close="wePayDone"/>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import dialogModifySign from './component/modifySign'
import dialogModifyBill from './component/modifyBill'

const serverUrl = ref(import.meta.env.VITE_APP_SERVER_URL)
const router = useRouter()
const { proxy } = getCurrentInstance()
import * as match from '@/api/match/pc'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getPayedOrderPdf } from '@/api/match/pc'
const total = ref(0);
const total2 = ref(0);
const payMationDone = () => {
  showOrganizerInfo.value = false
  payPop.value = false
}
const dialogPropsBase = {
  open: false,
  isView: false,
  title: '',
  data: null
}
const dialogModifySignProps = ref({
  ...dialogPropsBase
})
const dialogModifyBillProps = ref({
  ...dialogPropsBase
})
const activeName = ref('first')
const myform = ref({})

const groupList = ref([])
const cptPeriodArr = ref([])
const payTimeArr = ref([])
const commitTimeArr = ref([])
const countryList = ref([])
const tableData = ref([])
const billList = ref([])
const query = ref({
  pageNum: 1,
  pageSize: 10
})
const query2 = ref({
  pageNum: 1,
  pageSize: 10
})
const payType = ref('')
const payPop = ref(false)
const showOrganizerInfo = ref(false)
const showResult = ref(false)
const myBalance = ref('')
const nowBill = ref({})
const org = ref({})

onMounted(() => {
  getCountryList()
  getData()
  getList()
  getBillList()
})
const reset = (form) => {
  query.value = {
    pageNum: 1,
    pageSize: 10
  }
  query2.value = {
    pageNum: 1,
    pageSize: 10
  }
  cptPeriodArr.value = []
  payTimeArr.value = []
  commitTimeArr.value = []
  getBillList()
  getList()
}

function getData() {
  match.getMyPersonInfo().then(res => {
    myform.value = res.data
    myform.value.labelArr = myform.value.label.split(',')
    groupList.value = myform.value.groups
  })
}

function wePayDone() {
  payPop.value = false
  getBillList()
  getList()
}

function getList() {
  if (cptPeriodArr.value) {
    query.value.cptPeriod = cptPeriodArr.value.toString()
  }
  match.getMySignCptList(query.value).then(res => {
    tableData.value = res.rows
    total.value = res.total
  })
}

function getBillList() {
  query2.value.payTimeRange = payTimeArr.value.toString()
  query2.value.createTimeRange = commitTimeArr.value.toString()
  console.log(query2.value)
  match.getMyOrderList(query2.value).then(res => {
    billList.value = res.rows
    total2.value = res.total
  })
}

function getCountryList() {
  match.countryList().then(res => {
    countryList.value = res.data
  })
}

function signRow(row) {
  _.assign(dialogModifySignProps.value, dialogPropsBase, {
    open: true,
    isView: true,
    title: '报项详情',
    data: { ...row }
  })
}

function getMemberInfoByCptId(cptId) {
  match.getMemberInfoByCptId(cptId).then((res) => {
    myBalance.value = res.data.balance
  })
}

function goPay(bill) {
  console.log(bill)
  payPop.value = true
  nowBill.value = bill
  getMemberInfoByCptId(bill.cptId)
}

function payBill() {
  if (!payType.value) {
    ElMessage.error('请选择支付方式')
    return
  }
  match.payMatch({ orderId: nowBill.value.id, payType: payType.value }).then(res => {
    if (payType.value == 2) {
      org.value = res.data.org
      showOrganizerInfo.value = true
    } else if (payType.value == 1) {
      // 微信
      proxy.$refs['wePayRef'].open(res.data)
    } else {
      showResult.value = true
    }
  })
}

function billDetail(bill) {
  _.assign(dialogModifyBillProps.value, dialogPropsBase, {
    open: true,
    isView: true,
    title: '订单详情',
    data: { ...bill }
  })
}

function cancelBill(bill) {
  ElMessageBox.confirm('确定取消订单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    match.cancelMyUnPayedOrder(bill.id).then(Response => {
      console.log(Response.data)
      // 刷新数据
      getBillList()
      getList()
    })
  })
}

function downloadVoucher(row) {
  proxy.download(
      `/pdf/getPayedOrderPdf/${row.id}/${row.groupId || 0}`, {}, '报项凭证.pdf'
  )
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/variables.module.scss';
.centerPrice {
  text-align: center;
  font-size: 26px;
  margin: 20px;

  span {
    font-size: 40px;
    font-weight: bold;
  }
}

.app-container {
  background: #F5F7F9;
}

.grid-content {
  background: #fff;
}

:deep(.el-tabs__nav-wrap) {
  padding: 0 15px;
}

:deep(.el-radio.el-radio--large .el-radio__label) {
  display: flex;
  align-items: center;

  img {
    margin-right: 6px;
  }
}

.panel-footer .el-button--success {
  background: linear-gradient(270deg, $--color-primary,$--color-danger);
  border: none;
  padding: 0 40px;
  font-size: 16px;
}

.orange {
  font-size: 16px;
  font-style: normal;
  font-weight: bold
}

.orgbox {
  font-size: 16px;
  line-height: 30px;
}

.el-form--inline .el-form-item {
  width: auto;
}
</style>
